let aImg, len, seeHeight, scrollTop, i;

const blank = document.documentElement || document.body;

const emptyImg = [
    '/static/images/blank.gif',
    window.common.baseImgSrc
];
const notFontImg = window.common.errImgSrc;

function lazyImg(start) {
    aImg = document.querySelectorAll('.mlp-lazy');
    len = aImg.length;
    seeHeight = blank.clientHeight;
    scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
    for (i = 0; i < len; i++) {
        if(i < 5 && start) {
            if (emptyImg.indexOf(aImg[i].getAttribute('src')) != -1  && aImg[i].getAttribute('mlp-src') ) {
                (function(myImg){
                    effect(myImg);
                })(aImg[i])
            }
            continue;
        }
        if ((getTop(aImg[i]) < (seeHeight *2 + scrollTop)) ) {
            if (emptyImg.indexOf(aImg[i].getAttribute('src')) != -1 && aImg[i].getAttribute('mlp-src') ) {
                (function(myImg){
                    effect(myImg)
                })(aImg[i])
            }
        } else {
            break;
        }
    }
}

function effect(myImg){


    // myImg.className = myImg.className.replace("mlp-lazy", "mlp-continue");
    myImg.className = myImg.className.replace("mlp-lazy", "");
    if(myImg.getAttribute('is-detail')) {
        var img = new Image();
        var imgSrc = "";
        var clientWidth = blank.clientWidth;

        myImg.style.webkitOpacity = "0";
        myImg.style.opacity = "0";
        let set = setTimeout(function() {    //用settimeout是为了动画
            myImg.style.webkitTransition = "opacity .5s";
            myImg.style.transition = "opacity .5s";
            clearTimeout(set);
            set = null;

            img.onload = function() {
                if(img.width == 1 && img.height == 1) {
                    if(myImg.getAttribute('is-detail')) {
                        repeatImg(img,img.src,function(){
                            myImg.remove();
                            clearImg(img);
                        });
                    } else {  //图片错误，显示错误图片  没有找到图片
                        setImg(myImg,notFontImg);
                        clearImg(img);
                    }

                } else {
                    if(myImg.getAttribute('is-detail') && myImg.getAttribute('is-tb') && !/gif$/.test(myImg.getAttribute('mlp-src'))) {  //商品详情，图片是淘宝图片且不是gif图片
                        // if(img.width < window.common.clientWidth/2 && img.height == window.common.big) {
                        if(img.width < clientWidth && clientWidth < 600 && !img.getAttribute('data') && img.height == window.common.big){
                            img.setAttribute('data','1');
                            repeatImg(img, img.src);
                            return;
                        }
                    }

                    setImg(myImg, img.src)
                    clearImg(img);
                }
            }
            img.onerror = function(err){   //图片加载不出来
                let errImgSrc;
                if(err.path) {   //谷歌浏览器
                    errImgSrc = err.path[0].currentSrc;
                } else if(err.target) {  /*火狐浏览器*/
                    errImgSrc = err.target.currentSrc;
                }
                if(errImgSrc) {
                    repeatImg(img,errImgSrc,function(){
                        setImg(myImg,notFontImg);
                    });
                } else {
                    clearImg(img);
                }
            }
            img.onabort = function(err){   //图片加载到一半被破坏
                console.error("图片被破坏了");
                console.error(err);
            }

            /*
            * 图片过滤
            * 加上自己的后缀规则
            * */
            if(myImg.getAttribute('is-detail') && myImg.getAttribute('is-tb') && !/gif$/.test(myImg.getAttribute('mlp-src'))) {  //有淘宝标志，就加后缀  只有商品详情页用的到   过滤gif图片
                // if(myImg.getAttribute('is-tb')) {  //有淘宝标志，就加后缀  只有商品详情页用的到   过滤gif图片
                imgSrc =  myImg.getAttribute('mlp-src').replace(window.common.filterImg, '');
                img.src = imgSrc + window.common.detail;
            } else { //普通的地址, gif 图片地址，不加后缀
                img.src = myImg.getAttribute('mlp-src');
            }
            img.src = myImg.getAttribute('mlp-src');

            /*
            * 图片过滤
            * 把固定的_468x468q90s150.jpg   改成自己的后缀规则
            * */
            // img.src = myImg.getAttribute('mlp-src').replace('_468x468q90s150.jpg', window.common.detail);
        });
    } else {
        /*
        * 不是商品详情
        * */
        myImg.src = myImg.getAttribute('mlp-src');
    }




    /*
    * 判断图片有没有后缀，有后缀，就去掉后缀再次请求，没后缀就不请求，进入callback
    * */
    function repeatImg(img,errImgSrc, callback){
        if(common.filterImg.test(errImgSrc)) {
            img.src = errImgSrc.replace(window.common.filterImg, '');
        } else {  //图片错误，显示错误图片     商品详情页直接去掉这个图片
            callback && callback();
        }
    }
    function clearImg(img){
        img.onload = null;
        img.onerror = null;
        img.onabort = null;
        img.remove();
        // img.src = "";
    }
    function setImg(myImg,src){
        // myImg.className = myImg.className.replace("mlp-lazy", "");
        // myImg.className = myImg.className.replace("mlp-continue",'');
        myImg.src = src;
        myImg.style.webkitOpacity = "1";
        myImg.style.opacity = "1";
    }
}

function getTop(e){
    var offset=e.offsetTop;
    if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
    return offset;
};

export default {
    lazyImg
}
